<template>
    <div class="table">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 基础表格</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <div class="handle-box">
                 <el-input v-model="select_word" placeholder="请输入企业名称" class="handle-input mr10"></el-input>
                <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                <el-select v-model="status"  class="handle-select mr10" >
                    <el-option key="3" label="全部" value="all" ></el-option>
                    <el-option key="1" label="启用" value="广东省"></el-option>
                    <el-option key="2" label="禁用" value="湖南省"></el-option>
                </el-select> -->
                <el-button type="primary" @click="searchData">搜索</el-button>
            </div>
            <el-table :data="data" border  v-loading.body="listLoading" class="table"  >
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="name" label="名称"  width="250">
                </el-table-column>
                <el-table-column prop="adminUser.name" label="负责人" width="120">
                </el-table-column>
                <el-table-column prop="adminUser.phone" label="联系电话" width="150">
                </el-table-column>
                <el-table-column label="操作"  align="center" prop="id">
                    <template slot-scope="scope" >
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑企业信息
</el-button>
                        <el-button type="text" @click="handleplatform(scope.$index, scope.row)">设置交易平台</el-button>
                        <el-button type="text"  class="red" @click="handleapy(scope.$index, scope.row)">设置支付帐号</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div> -->
              <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-sizes="[5,10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
            <el-form ref="form" :model="form" label-width="200px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="主要负责人">
                    <el-select v-model="form.adminUserId">
                        <el-option   v-for="item in userlist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在省">
                     <el-select v-model="form.addressProvinceId" @change="handlePronvice">
                        <el-option   v-for="item in provincelist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市">
                     <el-select v-model="form.addressCityId" @change="handleCity">
                        <el-option   v-for="item in citylist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区县">
                    <el-select v-model="form.addressCountyId">
                        <el-option   v-for="item in countrylist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input type="textarea" v-model="form.addressDetail"></el-input>
                </el-form-item>
                <el-form-item label="海关注册代码">
                    <el-input  v-model="form.customsRegCode"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEditform">保存</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="设置交易平台" :visible.sync="platformVisible" width="50%" center>
             <el-form ref="platform" :model="platform" label-width="200px">
                <el-form-item label="名称">
                    <el-input v-model="platform.name" style="width:200px;"></el-input>
                    <el-button type="primary" plain style="margin-left:50px;"  @click="addnames">添加</el-button>
                </el-form-item>
                <el-form-item label="已有" >
                    <el-select v-model="platform.names" multiple >
                        <el-option
                            v-for="item in platform.names"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="platformVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveplatform">保存</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="支付宝" :visible.sync="apyVisible" width="50%">
            <el-form ref="form" :model="alipayform" label-width="200px">
                <el-form-item label="合作伙伴id">
                    <el-input v-model="alipayform.partnerId"></el-input>
                </el-form-item>
                <el-form-item label="合作伙伴md5密钥">
                    <el-input v-model="alipayform.partnerMd5SecretKey"></el-input>
                </el-form-item>
                <el-form-item label="合作伙伴支付宝RSA公钥">
                    <el-input v-model="alipayform.partnerRsaAlipayPublicSecretKey" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="合作伙伴RSA公钥">
                    <el-input v-model="alipayform.partnerRsaPrivateSecretKey" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="合作伙伴RSA私钥">
                    <el-input v-model="alipayform.partnerRsaPublicSecretKey" type="textarea"></el-input>
                </el-form-item>
                <!-- <el-form-item label="应用id" style="margin:67px 0;">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="AES内容密钥">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="支付宝网关">
                    <el-input  v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="应用支付宝RSA公钥">
                    <el-input v-model="form.address" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="应用RSA公钥">
                    <el-input v-model="form.address" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="应用RSA私钥">
                    <el-input v-model="form.address" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="通知地址">
                    <el-input  v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="返回地址">
                    <el-input  v-model="form.address"></el-input>
                </el-form-item> -->

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editapy = false">取 消</el-button>
                <el-button type="primary" @click="saveEditalipayform">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {UserQuery} from '@/api/user';
import {QueryOrg,QueryProvince,QueryCity,QueryCounty,ModifyOrg,SettingAlipay,QueryAlipay,SettingEbPlatform,QueryEbPlatform} from '@/api/company.js'
    export default {
        name: 'basetable',
        data() {
            return {
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                editVisible: false,
                apyVisible:false,
                platformVisible:false,
                delVisible: false,
                status:'all',
                form: {
                    orgId:'',
                    name: '',
                    adminUserId:'',
                    addressProvinceId: '',
                    addressCityId: '',
                    addressCountyId: '',
                    addressDetail: '',
                    customsRegCode: ''
                },
                alipayform:{
                    orgId:'',
                    partnerId:'',
                    partnerRsaPrivateSecretKey:'',
                    partnerRsaAlipayPublicSecretKey:'',
                    partnerMd5SecretKey:'',
                    partnerRsaPublicSecretKey:''
                },
                platform:{
                    orgId:'',
                    name:'',
                    names:[]
                },
                userlist:[],
                provincelist:[],
                citylist:[],
                countrylist:[],
                total: 0,
                listLoading: true,
                listQuery: {
                    pageNo: 1,
                    pageSize: 5
                }
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    return d;
                })
            }
        },
        methods: {
            // 分页导航
           handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.getData()
            },
            handleCurrentChange(val) {
            this.listQuery.pageNo = val
            this.getData()
            },
            getData(data) {
                var arg=Object.assign(this.listQuery,{
                    resultType:"pagination",
                    fetchAdminUser: true
                })
                if(data){
                  arg.name= this.select_word;   //  企业名称
                  arg.nameLike=true
                }else{
                   delete arg.name
                }
                this.listLoading=true;
                this.tableData=[];
                QueryOrg(arg).then(res=>{
                    this.tableData=res.data.list;
                    this.listLoading=false;
                    this.total=res.data.totalCount;
                })

            },
            init(){
                this.UserQuery();
                this.QueryProvince();
                this.handlePronvice(this.form.addressProvinceId);
                this.handleCity(this.form.addressCityId)
            },
            UserQuery(){
                UserQuery({
                        resultType:"list",
                        enable: true,
                        fetchRoles: true
                    }).then(res=>{
                        this.userlist=res.data
                    })
            },
            QueryProvince(){
                QueryProvince({
                    resultType:"list", 
                }).then(res=>{
                    this.provincelist=res.data
                })
            },
            handlePronvice(e){
                QueryCity({
                    resultType:"list", 
                    provinceId:e,
                }).then(res=>{
                    this.citylist=res.data
                })
                this.form.addressCityId='';
                this.form.addressCountyId='';
            },
            handleCity(e){
                QueryCounty({
                    resultType:"list", 
                    cityId:e,
                }).then(res=>{
                    this.countrylist=res.data
                })
                this.form.addressCountyId='';
            },
            searchData() {
                this.getData(this.select_word)
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                QueryOrg({
                    resultType:"unique",
                    id: row.id,
                    fetchAdminUser: true,
                    fetchProvince: true,
                    fetchCity: true,
                    fetchCounty: true
                }).then(res=>{
                    var data=res.data
                    this.form={
                        orgId:data.id,
                        name:data.name,
                        addressProvinceId: data.address.province.id,
                        addressCityId: data.address.city.id,
                        addressCountyId: data.address.county.id,
                        addressDetail: data.address.detail,
                        customsRegCode: data.customsRegCode
                    }
                     if(data.adminUser){this.form.adminUserId=data.adminUser.id}
                }).then(
                    this.init()
                )
                this.editVisible = true;
            },
            handleapy(index, row) {
                this.idx = index;
                QueryAlipay({
                    resultType:'unique',
                    orgId:row.id
                }).then(res=>{
                    console.log(res)
                   this.alipayform=Object.assign({orgId:row.id},res.data)
                })
                this.apyVisible = true;
            },
            handleplatform(index, row){
                this.idx=index;
                this.platformVisible=true;
                this.platform.orgId=row.id;
                this.platform.names=[];
                QueryEbPlatform({
                    resultType:'list',
                    orgId:row.id
                }).then(res=>{
                    var names=[]
                    for(var i in res.data){
                        names.push(res.data[i].name)
                    }
                    this.platform.names=names
                })
            },
            // delAll() {
            //     const length = this.multipleSelection.length;
            //     let str = '';
            //     this.del_list = this.del_list.concat(this.multipleSelection);
            //     for (let i = 0; i < length; i++) {
            //         str += this.multipleSelection[i].name + ' ';
            //     }
            //     this.$message.error('删除了' + str);
            //     this.multipleSelection = [];
            // },
            // handleSelectionChange(val) {
            //     this.multipleSelection = val;
            // },
            addnames(){
                console.log(this.platform.names)
                this.platform.names=[...this.platform.names,this.platform.name]
                this.platform.name=''
            },
            // 保存编辑
            async saveEditform() {
                this.editVisible = false;
                await ModifyOrg(this.form).then(res=>{
                    this.message(res,'修改成功')
                })
                await this.getData();
            },
            saveEditalipayform(){
                this.apyVisible=false;
                SettingAlipay(this.alipayform).then(res=>{
                   this.message(res,'设置支付宝成功')
                })
            },
            message(res,data){
                 if(res.code==0){
                        this.$message.success(data)
                    }else{
                       this.$message.error(res.msg) 
                    }
            },
            saveplatform(){
                this.platformVisible=false
                SettingEbPlatform({
                    names:this.platform.names,
                    orgId:this.platform.orgId
                }).then(res=>{
                     this.message(res,'设置交易平台成功')
                })
            }
            // 确定删除
            // deleteRow(){
            //     this.tableData.splice(this.idx, 1);
            //     this.$message.success('删除成功');
            //     this.delVisible = false;
            // }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>
